<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/app.css" />
		<link href="../css/mui.imageviewer.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
		
			.footer-left {
				position: absolute;
				width: 50px;
				height: 50px;
				left: 0px;
				bottom: 0px;
				text-align: center;
				vertical-align: middle;
				line-height: 100%;
				padding: 12px 4px;
			}
			.footer-right {
				position: absolute;
				width: 50px;
				height: 91.5px;
				right: 0px;
				bottom: 0px;
				text-align: center;
				display: inline-block;
				line-height: 36px;
				font-size: 14px;
			}
			.footer-center {
				height: 34.5px;
				padding: 5px 0px;
			}
			.footer-center [class*=input] {
				width: 100%;
				height: 100%;
				border-radius:35px;
			}
			.footer-center .input-text {
				background: #fff;
				border: solid 1px #ddd;
				padding: 15px !important;
				font-size: 16px !important;
				line-height: 18px !important;
				font-family: verdana !important;
				overflow: hidden;
			}
			.footer-center .input-sound {
				background-color: #eee;
			}
			.mui-content {
				height: 100%;
				padding: 44px 0px 50px 0px;
				overflow: auto;
				background-color: #F8F8F8;
				box-sizing: border-box;
			}
			#msg-list {
				height: 100%;
				overflow: auto;
				height: 100%;
				padding-bottom: 60px;
				box-sizing: border-box;
				-webkit-overflow-scrolling: touch;
			}
			.msg-item {
				padding: 8px;
				clear: both;
			}
			.msg-item .mui-item-clear {
				clear: both;
			}
			.msg-item .msg-user {
				width: 38px;
				height: 38px;
				border: solid 1px #d3d3d3;
				display: inline-block;
				background: #fff;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				padding: 3px;
				color: #ddd;
			}
			.msg-item .msg-user-img{
				width: 38px;
				height: 38px;
				display: inline-block;
				border-radius: 3px;
				vertical-align: top;
				text-align: center;
				float: left;
				color: #ddd;
			}
			
			.msg-item .msg-content {
				display: inline-block;
				border-radius: 5px;
				border: solid 1px #d3d3d3;
				background-color: #FFFFFF;
				color: #333;
				padding: 8px;
				vertical-align: top;
				font-size: 15px;
				position: relative;
				margin: 0px 8px;
				max-width: 75%;
				min-width: 35px;
				float: left;
			}
			.msg-item .msg-content .msg-content-inner {
				overflow-x: hidden;
			}
			.msg-item .msg-content .msg-content-arrow {
				position: absolute;
				border: solid 1px #d3d3d3;
				border-right: none;
				border-top: none;
				background-color: #FFFFFF;
				width: 10px;
				height: 10px;
				left: -5px;
				top: 12px;
				-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);
			}
			.msg-item-self .msg-user,
			.msg-item-self .msg-content {
				float: right;
			}
			.msg-item-self .msg-content .msg-content-arrow {
				left: auto;
				right: -5px;
				-webkit-transform: rotateZ(225deg);
				transform: rotateZ(225deg);
			}
			.msg-item-self .msg-content,
			.msg-item-self .msg-content .msg-content-arrow {
				background-color: #4CD964;
				color: #fff;
				border-color: #2AC845;
			}
			footer .mui-icon {
				color: #000;
			}
			footer .mui-icon:active {
				color: #007AFF !important;
			}
			footer .mui-icon-paperplane:before {
				content: "发送";
			}
			footer .mui-icon-paperplane {
				/*-webkit-transform: rotateZ(45deg);
				transform: rotateZ(45deg);*/
				
				font-size: 16px;
				word-break: keep-all;
				line-height: 100%;
				padding-top: 6px;
				color: rgba(0, 135, 250, 1);
			}
			#msg-sound {
				-webkit-user-select: none !important;
				user-select: none !important;
			}
			.rprogress {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 140px;
				height: 140px;
				margin-left: -70px;
				margin-top: -70px;
				background-image: url(../images/arecord.png);
				background-repeat: no-repeat;
				background-position: center center;
				background-size: 30px 30px;
				background-color: rgba(0, 0, 0, 0.7);
				border-radius: 5px;
				display: none;
				-webkit-transition: .15s;
			}
			.rschedule {
				background-color: rgba(0, 0, 0, 0);
				border: 5px solid rgba(0, 183, 229, 0.9);
				opacity: .9;
				border-left: 5px solid rgba(0, 0, 0, 0);
				border-right: 5px solid rgba(0, 0, 0, 0);
				border-radius: 50px;
				box-shadow: 0 0 15px #2187e7;
				width: 46px;
				height: 46px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -23px;
				margin-top: -23px;
				-webkit-animation: spin 1s infinite linear;
				animation: spin 1s infinite linear;
			}
			.r-sigh{
				display: none;
				border-radius: 50px;
				box-shadow: 0 0 15px #2187e7;
				width: 46px;
				height: 46px;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -23px;
				margin-top: -23px;
				text-align: center;
				line-height: 46px;
				font-size: 40px;
				font-weight: bold;
				color: #2187e7;
			}
			.rprogress-sigh{
				background-image: none !important;
			}
			.rprogress-sigh .rschedule{
				display: none !important;
			}
			.rprogress-sigh .r-sigh{
				display: block !important;
			}
			.rsalert {
				font-size: 12px;
				color: #bbb;
				text-align: center;
				position: absolute;
				border-radius: 5px;
				width: 130px;
				margin: 5px 5px;
				padding: 5px;
				left: 0px;
				bottom: 0px;
			}
			@-webkit-keyframes spin {
				0% {
					-webkit-transform: rotate(0deg);
				}
				100% {
					-webkit-transform: rotate(360deg);
				}
			}
			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}
				100% {
					transform: rotate(360deg);
				}
			}
			#h {
				background: #fff;
				border: solid 1px #ddd;
				padding: 10px !important;
				font-size: 16px !important;
				font-family: verdana !important;
				line-height: 18px !important;
				overflow: visible;
				position: absolute;
				left: -1000px;
				right: 0px;
				word-break: break-all;
				word-wrap: break-word;
			}
			.cancel {
				background-color: darkred;
			}
			.mui-bar>div:nth-child(2){
				position: relative;
				float: left;
				width:calc(100% -  44px);
				height: 100%;
				text-align: center;
				line-height: 44px;
				font-size:14px;
                font-weight:bold;
                color:rgba(255,255,255,1);
			}
			.mui-bar>div:nth-child(3){
				position: absolute;
				right: 15px;
				width: 22px;
				height: 100%;
				box-sizing: border-box;
				padding-top: 11px;
			}
			a{
				color:#FFFFFF;
			}
			.mui-bar>div:nth-child(3)>img{
              width: 22px;
			  height: 22px;
			}
			.mui-bar {
background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
box-shadow:0px 5px 8px 0px rgba(254, 95, 99, 0.35);
			}
			
			.leftnews,.rightnews{
				position: relative;
	            width: 100%;
				float: left;
				margin-top: 10px;
				padding: 0  15px;
			}
			.leftnews>div:nth-child(1){
				position: relative;
				float: left;
				width: 44px;
				height: 100%;
				
			}
			
			.leftnews>div:nth-child(1)>img{
				width: 44px;
				height: 44px;
				border-radius: 50%;
				}
			
			.leftnews>div:nth-child(2){
						position: relative;
						float: left;
						width: calc(100% - 98px);
						height: 100%;
						padding-left: 10px;
						box-sizing: border-box;
					
					}
			.leftnews>div:nth-child(2)>div:nth-child(1){
				width: 100%;
				height: 22px;
				line-height: 22px;
				font-size:14px;
                font-weight:500;
                color:rgba(153,153,153,1);
                line-height:22px;
				text-align: left;
			}
				.leftnews>div:nth-child(2)>div:nth-child(2){
					width: 100%;
					line-height: 22px;
					font-size:14px;
					font-weight:500;
					color:rgba(153,153,153,1);
					line-height:22px;
					background:rgba(255,255,255,1);
                    border-radius:10px;
					padding: 7px  18px;
					box-sizing: border-box;
				}
			.leftnews>div:nth-child(2)>div:nth-child(3){
				width:100%;
				height: 40px;
				line-height: 22px;
				font-size:12px;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:20px;
				text-align: center;
			}	
			
			
			
				.rightnews>div:nth-child(1){
				position: relative;
				float: right;
				width: 44px;
				height: 100%;
				
			}
			
			.rightnews>div:nth-child(1)>img{
				width: 44px;
				height: 44px;
				border-radius: 50%;
				}
			
			.rightnews>div:nth-child(2){
						position: relative;
						float: right;
						height: 100%;
						width: calc(100% - 98px);
						padding-right: 10px;
						box-sizing: border-box;
					  
					}
			.rightnews>div:nth-child(2)>div:nth-child(1){
				width: 100%;
				height: 22px;
				line-height: 22px;
				font-size:11px;
			    font-weight:500;
			    color:rgba(153,153,153,1);
			    line-height:22px;
				text-align: right;
			}
				.rightnews>div:nth-child(2)>div:nth-child(2){
					width: 100%;
					line-height: 22px;
					font-size:14px;
					font-weight:500;
					color:rgba(153,153,153,1);
					line-height:22px;
					background:rgba(255,255,255,1);
			        border-radius:10px;
					padding: 7px  18px;
					box-sizing: border-box;
				}
				
				
			.rightnews>div:nth-child(2)>div:nth-child(3){
				width: 100%;
				height: 40px;
				line-height: 22px;
				font-size:12px;
				font-weight:500;
				color:rgba(153,153,153,1);
				line-height:20px;
				text-align: center;
			}	
					footer {
					position: relative;
					width: 100%;
					
					border-top: solid 1px rgba(246,246,246,1);
					overflow: hidden;
					padding: 0px 30px;
					background:rgba(246,246,246,1);
					box-sizing: border-box;
				}
				.qun_foot{
					width: 100%;
					position: relative;
					float: left;
					padding-top: 7px;
					box-sizing: border-box;
				}
				input{
					width: 75%;
					line-height: 40px;
					position: relative;
					float: left;
					border: none;
					background:rgba(255,255,255,1);
					border-radius:35px;
					padding: 0px 19px;
					overflow: hidden;
					box-sizing: border-box;
					font-size: 14px;
				}
				label{
					width:131px;
					height:67px;
					background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
					border-radius:34px;
					font-size:16px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(255,255,255,1);
					padding: 7px 15px;
					line-height: 33px;
					box-sizing: border-box;
					margin:15px;
				}
				.qun_one{
					width: 100%;
					position: relative;
					float: left;
					padding: 10px  0px;
					box-sizing: border-box;
				}
				.qun_two{
					width: 25%;
					position: relative;
					float: left;
				}
				.qun_two>img{
					width: 30px;
					height: 30px;
				}
				
				.container_foot{
					width: 100%;
					position: fixed;
					bottom: 0;
				}
				.tupiany{
					width: 100%;
					height: 219px;
					position: relative;
					float: left;
					background:rgba(255,255,255,1);
					 display: none;
				}
				.tupiany_one{
					width: 100%;
					position: relative;
					float: left;
					overflow-x: auto;
					white-space: nowrap;
				}
				.mui-input-row>img{
					width: auto;
					height: 176px;
				}
				.mui-checkbox.mui-left input[type=checkbox]{
					left: 95px;
				}
				.mui-checkbox input[type=checkbox]{
					width: 18px;
					height: 18px;
				}
				.mui-checkbox input[type=checkbox]:checked:before, .mui-radio input[type=radio]:checked:before {
					color: #FE635F;
				}
				.mui-checkbox{
					display: inline-block;
				}
				.tupian_two{
					width: 100%;
					position: relative;
					float: left;
					
				}
				.span_one{
					width: 75%;
					position: relative;
					float: left;
				}
				.span_one>span{
					font-size:15px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(51,51,51,1);
					padding-left: 15px;
				}
				.span_two{
					width:74px;
					height:33px;
					background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
					border-radius:34px;
					float: left;
					line-height: 33px;
					text-align: center;
					margin-top: -5px;
				}
				.span_two>span{
					font-size:16px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(255,255,255,1);
				}
				.liwu{
					width:100%;
					height: 284px;
					position: relative;
					float: left;
					background:rgba(255,255,255,1);
				}
				.liwu_one{
					width: 100%;
					padding-left: 15px;
					box-sizing: border-box;
				}
				.liwu_one>span{
					font-size:14px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(51,51,51,1);
					line-height:48px;
				}
				.liwu_one>img{
					width: 6px;
					height: 9px;
				}
				.liwu_slider{
					width: 20%;
					margin-left: 2.5%;
					position: relative;
					float: left;
					margin-top: 5px;
					display: inline-block;
					box-sizing: border-box;
					padding-bottom: 2px;
				}
				.slider_one{
					width: 100%;
					height: 54px;
					text-align: center;
				}
				.slider_one>img{
					width: 57px !important;
					height: 54px;
				}
				.slider_two{
					width: 100%;
					text-align: center;
					padding-top: 10px;
					box-sizing: border-box;
				}
				.slider_two>p{
					font-size:12px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(102,102,102,1);
				}
				.slider_three{
					width: 100%;
					text-align: center;
					padding-top: 2px;
					box-sizing: border-box;
				}
				.slider_three>img{
					width: 11px !important;
					height: 11px;
				}
				.slider_three>span{
					font-size:11px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(255,175,35,1);
					
				}
				.mui-slider .mui-slider-group .mui-slider-item{
					height: 0px;
				}
				.mui-fullscreen {
					top: 40px;
					height: 215px;
				}
				.liwu_three{
					width: 100%;
					position: absolute;
					top: 87%;
				}
				.three_one{
					width: 15%;
					position: relative;
					float: left;
					padding-top: 6px;
					box-sizing: border-box;
					padding-left: 15px;
				}
				.three_one>img{
					width: 11px;
					height: 11px;
					position: relative;
					float: left;
					margin-top: 3px;
				}
				.three_one>span{
					font-size:14px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(249,171,16,1);
					position: relative;
					float: left;
				}
				.three_two{
					width: 15%;
					position: relative;
					float: left;
					padding-top: 6px;
					box-sizing: border-box;
					padding-left: 15px;
				}
				.three_two>span{
					font-size:14px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(102,102,102,1);
				}
				.three_two>img{
					width: 6px;
					height: 9px;
				}
				.three_btn{
					width: 30%;
					height: 33px;
					position: relative;
					float: right;
					background:linear-gradient(180deg,rgba(252,126,119,1) 0%,rgba(254,96,93,1) 100%);
					border-radius:34px;
					text-align: center;
					line-height: 33px;
					margin-right: 15px;
				}
				.three_btn>span{
					font-size:16px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(255,255,255,1);
				}
				.liwu_secode{
					width: 100%;
					position: relative;
					float: left;
				}
				.secode_one{
					    width: 15%;
						position: relative;
						float: left;
						padding-left: 15px;
						box-sizing: border-box;
				}
				.secode_one>span{
					font-size:14px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(51,51,51,1);
					line-height:36px;
				}
				.secode_two{
					height:24px;
					background:rgba(237,234,234,1);
					border-radius:30px 25px 25px 20px;
					position: relative;
					float: left;
					line-height: 24px;
					margin-top: 6px;
				}
				.secode_two>img{
					width:24px;
					height:24px;
					border-radius:24px;
				}
				.secode_two>span{
					font-size:14px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(51,51,51,1);
					position: relative;
					float: right;
					padding-right: 15px;
					box-sizing: border-box;
				}
				.secode_three{
					width: 15%;
					position: relative;
					float: right;
					padding-top: 6px;
					box-sizing: border-box;
				}
				.secode_three>span{
					font-size:14px;
				font-family:PingFang-SC-Medium;
				font-weight:500;
				color:rgba(51,51,51,1);
				}
				.secode_three>img{
					width: 6px;
					height: 9px;
				}
				.active{
					border: 1px solid red;
				}
				
				.yinpin{
					position: relative;
					float: left;
					width: 100%;
					height: 20px;
				}
				.yinse{
					position: absolute;
					width: 100%;
					height: 20px;
					background: red;
					top: 0px;
				}
			/* 	#mList{
					position: relative;
					float: left;
					width: 100%;
					background: none;
					border: none;
				} */
				
			.leftnews .recordItem{
					position: relative;
					width: 100px;
					float: left;
					background: #9eea6a;
					text-align: left;
					border-radius: 10px;
					padding: 0  15px;
					line-height: 44px;
					height: 44px;
					box-sizing: border-box;
					}
			.mList{
			height: 44px;
			background: none!important;
		}		
					
			.rightnews	.recordItem{
					position: relative;
					width: 100px;
					line-height: 44px;
					height: 44px;
					float: right;
					background: #9eea6a;
					text-align: right;
					border-radius: 10px;
					padding: 0  15px;
					box-sizing: border-box;
				}
			.liaoimg{
				position: relative;
				width: 100%;
				
			}	
			a:active{
				color: #FFFFFF;
			}	

				.jianghua{
					width: 100%;
					height: 284px;
					position: relative;
					background:rgba(255,255,255,1);
					text-align: center;
					padding-top: 35px;
					box-sizing: border-box;
				}
				
				.jianghua>p:nth-child(1){
					font-size:15px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(153,153,153,1);
					line-height:20px;
				}
				.jianghua>img{
					width: 90px;
					height: 90px;
				}
				.jianghua>p:nth-child(3){
					font-size:13px;
					font-family:PingFang-SC-Medium;
					font-weight:500;
					color:rgba(254,99,96,1);
					line-height:20px;
				}
				.actives{
					background: #fad5d5;
					box-sizing: border-box;
				}
		</style>
	</head>

	<body contextmenu="return false;"  id="body" >
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<div>个人聊天</div>
			<div><img  class="navigation" src="../image/daohang.png" /></div>
		</header>
		
		<div class="mui-content" id="mui-content">
			<div id='msg-list'>
				<div class="leftnews">
					<div><img  src="../image/touxiangmy.png" /></div>
					<div class="pingluns">   <div>张雪</div>
						    <div>音乐让人痴迷的点，就是它的内容，它的情感，它的境界。其实，很多人听不出歌手的能力，听到喜欢的歌时，要不就是被那声音打动，或者被歌词感染，要么就是感觉这首歌，唱到了自己的心理，所以，不断的听，不断的沉溺在哪个世界之中，不能自拔。</div>
							<div>07-03  18:16</div>
					</div>
				</div>
				<div class="rightnews">
						<div><img  src="../image/touxiangmy.png" /></div>
					<div class="pingluns">   <div>小小英</div>
						    <div>音乐让人痴迷的点，就是它的内容，它的情感，它的境界。其实，很多人听不出歌手的能力，听到喜欢的歌时，要不就是被那声音打动，或者被歌词感染，要么就是感觉这首歌，唱到了自己的心理，所以，不断的听，不断的沉溺在哪个世界之中，不能自拔。</div>
							<div>07-03  18:16</div>
					</div>
				</div>
				<!-- 音频文件 -->
				<div class="leftnews">
					<div><img  src="../image/touxiangmy.png" /></div>
					<div class="pingluns">   <div>张雪</div>
					   <div class="mList"><div class='recordItem'  src='https://www.w3school.com.cn/i/horse.ogg'>12  s音频</div></div>
					   <div>07-03  18:16</div>
					</div>
				</div>
				
				<div class="rightnews">
						<div><img  src="../image/touxiangmy.png" /></div>
					<div class="pingluns">   <div>小小英</div>
					        <div class="mList"><div class='recordItem' href="java"  src='https://www.w3school.com.cn/i/horse.ogg'>12  s音频</div></div>
							<div>07-03  18:16</div>
					</div>
				</div>
				
			<div class="leftnews">
				<div><img  src="../image/touxiangmy.png" /></div>
				<div class="pingluns">   <div>张雪</div>
				   <div><img  class="liaoimg" src="../image/767b9f7d547d7d608bb0f36a55a476738816dbc21dd9a-fEJ4nN_fw658@2x.png" /></div>
				<div>07-03  18:16</div>
				</div>
			</div>
			
			<div class="rightnews">
					<div><img  src="../image/touxiangmy.png" /></div>
				<div class="pingluns">   <div>小小英</div>
				        <div ><img   class="liaoimg" src="../image/767b9f7d547d7d608bb0f36a55a476738816dbc21dd9a-fEJ4nN_fw658@2x.png" /></div>
				<div>07-03  18:16</div>
				</div>
			</div>
			
			
						
			<div class="leftnews">
				<div><img  src="../image/touxiangmy.png" /></div>
				<div class="pingluns">   <div>张雪送给李宇春一个</div>
				   <div><img  class="liaoimg" src="../image/767b9f7d547d7d608bb0f36a55a476738816dbc21dd9a-fEJ4nN_fw658@2x.png" /><span>鲜花</span></div>
				<div>07-03  18:16</div>
				</div>
			</div>
			
			<div class="rightnews">
				<div><img  src="../image/touxiangmy.png" /></div>
				<div class="pingluns">   <div>小小英送给张雪一个</div>
				<div ><img   class="liaoimg" src="../image/767b9f7d547d7d608bb0f36a55a476738816dbc21dd9a-fEJ4nN_fw658@2x.png" /><span>香水</span></div>
				<div>07-03  18:16</div>
				</div>
			</div>
			</div>
		</div>
		
		
		<div class="container_foot">
			<footer>
				<div class="qun_foot">
					<input rows="" cols="" class="qun_text" />
						
					<label>
						发送
					</label>
				</div>
				<div class="qun_one">
					<div class="qun_two">
						<img   state="0" src="../image/weixuanyuyin.png" >
					</div>
					<div  class="qun_two">
						<img state="1"  src="../image/weixuanxiangc.png" >
					</div>
					<div class="qun_two">
						<img  state="2" state="2" src="../image/weixuanxiangj.png" >
					</div>
					<div  class="qun_two">
						<img state="3" src="../image/weixuanliwu.png" >
					</div>
				</div>
			</footer>
			
			
			<!-- 讲话 -->
			<div class="jianghua" style="display: none;">
				<p>按住说话</p >
				<img src="../image/lyin.png"  id="btnStartRecord" alt="">
				<p>对讲</p >
                  <div id="time"></div>
			</div>
			<!-- 图片 -->
			<div class="tupiany">
				<!-- <div class="tupiany_one">
					<div class="mui-input-row mui-checkbox mui-left">
					  <img src="../image/9072f7c0d0cf707cc373c1a446534bb.png" >
					  <input name="checkbox1" value="Item 1" type="checkbox">
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
					  <img src="../image/9072f7c0d0cf707cc373c1a446534bb.png" >
					  <input name="checkbox1" value="Item 1" type="checkbox">
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
					  <img src="../image/9072f7c0d0cf707cc373c1a446534bb.png" >
					  <input name="checkbox1" value="Item 1" type="checkbox">
					</div>
					<div class="mui-input-row mui-checkbox mui-left">
					  <img src="../image/9072f7c0d0cf707cc373c1a446534bb.png" >
					  <input name="checkbox1" value="Item 1" type="checkbox">
					</div>
				</div>
				<div class="tupian_two">
					<div class="span_one">
						<span>相册</span>
					</div>
					<div class="span_two">
						<span>发送(2)</span>
					</div>
				</div> -->
			</div>
			<!-- 礼物 -->
			<div class="liwu"  style="display: none;">
				<div class="liwu_one" >
					<span>选中赠送对象</span>
					<img src="../image/youjiantous.png" alt="">
				</div>
				<div class="liwu_secode"  style="display: none;">
					<div class="secode_one">
						<span>送给:</span>
					</div>
					<div class="secode_two">
						<img src="../image/touxiang.png" alt="">
						<span nameid="">张雪</span>
					</div>
					<div class="secode_three">
						<span>换人</span>
						<img src="../image/youjiantous.png" alt="">
					</div>
				</div>
				<div class="mui-slider mui-fullscreen">
					<div class="mui-slider-group">
						<div class="mui-slider-item">
							<a href="javascript:;">
								<div class="liwu_slider">
										<div class="slider_one">
											<img src="../image/767b9f7d547d7d608bb0f36a55a476738816dbc21dd9a-fEJ4nN_fw658@2x.png" alt="">
										</div>
										<div class="slider_two">
											<p>鲜花</p>
										</div>
										<div class="slider_three">
											<img src="../image/jingbi.png" alt="">
											<span>5</span>
										</div>
								</div>
								
								<div class="liwu_slider">
										<div class="slider_one">
											<img src="../image/8f5156ae2ab89de32480aa394ba9d91c529de9871fb09-Wf14bt_fw658@2x.png" alt="">
										</div>
										<div class="slider_two">
											<p>香水</p>
										</div>
										<div class="slider_three">
											<img src="../image/jingbi.png" alt="">
											<span>10</span>
										</div>
								</div>
								
								<div class="liwu_slider">
										<div class="slider_one">
											<img src="../image/e7bc651922a45281c3f7fa745ba113bdf4df97ff12797-oscAWz_fw658@2x.png" alt="">
										</div>
										<div class="slider_two">
											<p>飞吻</p>
										</div>
										<div class="slider_three">
											<img src="../image/jingbi.png" alt="">
											<span>20</span>
										</div>
								</div>
								
								<div class="liwu_slider">
										<div class="slider_one">
											<img src="../image/daf0ac4984d8cbb867570bdd654c3fbf71230d4e1b008-zqAShv_fw658@2x.png" alt="">
										</div>
										<div class="slider_two">
											<p>蛋糕</p>
										</div>
										<div class="slider_three">
											<img src="../image/jingbi.png" alt="">
											<span>30</span>
										</div>
								</div>
								
								<div class="liwu_slider">
										<div class="slider_one">
											<img src="../image/3d417cb45ef6bfc91648122e957bf8318d8f408b19481-uaSzZd_fw658@2x .png" alt="">
										</div>
										<div class="slider_two">
											<p>相机</p>
										</div>
										<div class="slider_three">
											<img src="../image/jingbi.png" alt="">
											<span>40</span>
										</div>
								</div>
								
								<div class="liwu_slider">
										<div class="slider_one">
											<img src="../image/d02ab30f06fb81d4d38b548c3a6308ac829bb695249b5-ASEQnT_fw658@2x.png" alt="">
										</div>
										<div class="slider_two">
											<p>包包</p>
										</div>
										<div class="slider_three">
											<img src="../image/jingbi.png" alt="">
											<span>40</span>
										</div>
								</div>	
								
								<div class="liwu_slider">
										<div class="slider_one">
											<img src="../image/a53214b01ea48d4c386ff3ce68d0ccf21a9789941485a-xljhvH_fw658@2x.png" alt="">
										</div>
										<div class="slider_two">
											<p>跑车</p>
										</div>
										<div class="slider_three">
											<img src="../image/jingbi.png" alt="">
											<span>60</span>
										</div>
								</div>
								
								<div class="liwu_slider">
										<div class="slider_one">
											<img src="../image/df011bdbbcbd2abc15c66d245b1dcddc5b01bdec23cf4-0GdYAl_fw658@2x.png" alt="">
										</div>
										<div class="slider_two">
											<p>游艇</p>
										</div>
										<div class="slider_three">
											<img src="../image/jingbi.png" alt="">
											<span>70</span>
										</div>
								</div>
								
							</a>
						</div>
						<div class="mui-slider-item">
							<a href="javascript:;">
									<div class="liwu_slider">
										<div class="slider_one">
											<img src="../image/767b9f7d547d7d608bb0f36a55a476738816dbc21dd9a-fEJ4nN_fw658@2x.png" alt="">
										</div>
										<div class="slider_two">
											<p>鲜花</p>
										</div>
										<div class="slider_three">
											<img src="../image/jingbi.png" alt="">
											<span>5</span>
										</div>
								</div>
							</a>
						</div>
						<div class="mui-slider-item">
							<a href="javascript:;">
									<div class="liwu_slider">
										<div class="slider_one">
											<img src="../image/767b9f7d547d7d608bb0f36a55a476738816dbc21dd9a-fEJ4nN_fw658@2x.png" alt="">
										</div>
										<div class="slider_two">
											<p>鲜花</p>
										</div>
										<div class="slider_three">
											<img src="../image/jingbi.png" alt="">
											<span>5</span>
										</div>
								</div>
							</a>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>
				<div class="liwu_three">
					<div class="three_one">
						<img src="../image/jingbi.png" alt="">
						<span>120</span>
					</div>
					<div class="three_two">
						<span>充值</span>
						<img src="../image/youjiantous.png" alt="">
					</div>
					<div class="three_btn">
						<span>立即赠送</span>
					</div>
				</div>
			</div>
		</div>
		
		
	<!-- 	<div id='sound-alert' class="rprogress">
			<div class="rschedule"></div>
			<div class="r-sigh">!</div>
			<div id="audio_tips" class="rsalert">手指上滑，取消发送</div>
		</div> -->
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-2.1.4.min.js"></script>
	<!-- 	<script src="../js/mui.imageViewer.js"></script>
		<script src="../js/arttmpl.js"></script> -->
		<script type="text/javascript" charset="utf-8">
			
			mui.init({
 gestureConfig:{
   tap: true, //默认为true
   doubletap: true, //默认为false
   longtap: true, //默认为false
   swipe: true, //默认为true
   drag: true, //默认为true
   hold:false,//默认为false，不监听
   release:false//默认为false，不监听
  }
});
	
	

	
mui.plusReady(function(){   
	
	//监听 从选人页面返回来之后  进行 的操作
	window.addEventListener('cusRefresh',function(event){
			 var  name=event.detail.backname;
				var  backsrc=event.detail.backsrc;
				var  backid= event.detail.backid
		        $(".liwu_one").css("display","none")
				$(".liwu_secode").css("display","block");
		        $(".secode_two").children("img").attr("src",backsrc);
				 $(".secode_two").children("span").attr("nameid",backid);	
				$(".secode_two").children("span").text(name);
	});  

	
	//点击选择赠送对象
	mui(document).on("tap",".liwu_one",function(){
			mui.openWindow({
	         url:"choose.html",		
			 id:"choose.html",		
			}) 
	});
		//换人
	mui(document).on("tap",".secode_three",function(){
			mui.openWindow({
	         url:"choose.html",		
			 id:"choose.html",		
			}) 
	});
	
	
	//点击选择带礼物 
	mui(document).on("tap",".liwu_slider",function(){
		$(this).addClass("actives");
		$(this).siblings().removeClass("actives");
	});


	//充值
	mui(document).on("tap",".three_two",function(){
			mui.openWindow({
	         url:"../sub5/huchongzhigold.html",		
			 id:"huchongzhigold.html",		
			}) 
	});
	
	//立即赠送礼物
		mui(document).on("tap",".three_btn",function(){
			
    	});
	
	
	
	
	
	            //页面视觉化 效果初始化
				var msghei=document.getElementById("mui-content");
	            var  height= $(document).height();
				$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
				//进入群资料信息
				mui(".mui-bar").on("tap",".navigation",function(){
				   mui.openWindow({
					   	url:'qunziliaosub4.html',
					   id:"qunziliaosub4.html",
					   extras: {
					   //参数
					   },
					   show: {
					   	autoShow: true, //页面loaded事件发生后自动显示，默认为true
					   	aniShow: "slide-in-right", //页面显示动画，默认为”slide-in-right“；
					   	duration: 100 //页面动画持续时间，Android平台默认100毫秒，iOS平台默认200毫秒；
					   },
					   waiting: {
					   	autoShow: true, //自动显示等待框，默认为true
					   	title: '正在加载...', //等待对话框上显示的提示内容
					   }
					   
				   })
				})
				
				
				
				//点击聊天下面的四个按钮
				//点击语音聊天按钮
			$(".qun_one").on("tap",".qun_two  img",function(){
			$("#msg-list").css("padding-bottom","350px");		
	    	$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
					var  index=$(this).attr("state")
					if(index==0){
						$(".jianghua").css("display","block");
						$(".liwu").css("display","none");
						  $(".liwu_one").css("display","block")
						$(".liwu_secode").css("display","none")
						//点击照片
					}else  if(index==1){
						galleryImages()
						
						// 点击拍照
					}else if(index==2){
						getImages()
						
						//点击礼物
					}else  if(index==3){
						$(".liwu").css("display","block");
						$(".jianghua").css("display","none");
						$("#msg-list").css("padding-bottom","350px");		
						$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
					}
				})
				
				//点击空白隐藏 下面的东西
				mui(document).on("tap","#msg-list",function(e){
						var _con=$(".recordItem")
					if(!_con.is(e.target) && _con.has(e.target).length === 0)	{
						$(".liwu").css("display","none");
						$(".jianghua").css("display","none");
							$("#msg-list").css("padding-bottom","60px");		
						$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
						  $(".liwu_one").css("display","block")
						$(".liwu_secode").css("display","none")
						$("input").blur();
					}
				})
				
				//输入框 获取焦点的时候
				$(document).on("focus",".qun_text",function(){
					$(".liwu").css("display","none");
					$(".jianghua").css("display","none");
						$("#msg-list").css("padding-bottom","350px");		
				$("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
					
				})
				//失去焦点
				$(document).on("blur",".qun_text",function(){
					$(".liwu").css("display","none");
					$(".jianghua").css("display","none");
						$("#msg-list").css("padding-bottom","60px");		
					   $("#msg-list").scrollTop($("#msg-list")[0].scrollHeight);
					   $(".liwu_one").css("display","block")
						$(".liwu_secode").css("display","none")
				})
			
				//键盘弹出或者收起事件处理	
				const innerHeight = window.innerHeight;
				  window.addEventListener('resize', () => {
					const newInnerHeight = window.innerHeight;
					if (innerHeight > newInnerHeight) {
					  // 键盘弹出事件处理
					} else {
					  // 键盘收起事件处理
					  $("input").blur();
					}
				  });

    //点击录音	
    var recorder = null;
    var recorderTimer = null;
    var time = 0;
    $("#btnStartRecord").bind('touchstart',function(){
        startRecord();
	  var text="松开发送"
    });
    $("#btnStartRecord").bind('touchend',function(){
        endRecord();
		var text="按住说话"
    });    
	// 这个是开始录音的方法
    function startRecord(){
        recorderTimer = setInterval(function(){
            time++;
            $("#time").html(time);
        },1000);
        // 1.创建recorder
        recorder = plus.audio.getRecorder();
        // 2.录音
        recorder.record({filename:"_doc/audio/"},function(filePath){
            plus.io.resolveLocalFileSystemURL(filePath,function(entry){
                console.log(filePath);
                console.log(entry);
               var listStr = "<div class='recordItem'  src='"+filePath+"'>12  s音频</div>";
               $(".mList").html(listStr);
			// createUpload(filePath)  //上传语音
            },function(e){
                console.log("读取录音失败："+e.message);
            });
        });
		
		
		
		
		
	//这个是点击语音进行播放
	$(document).on("tap",".mList  .recordItem",function(){
		            var oName = $(this).attr("src");
		            var path = "";
		            var player = plus.audio.createPlayer(oName);
			var num =player.getDuration();//获取音频总长度number  
		setTimeout(function(){//延时获取，否则可能没有返回长度  
		    var num = player.getDuration();  
		},100)  
		            player.play(function(){
		                console.log('play ended');
		            },function(e){
		                console.log("message："+e.message);
		            });
		        });
    }
	 

	 
	 
	 
	 
	 // 3.停止录音
    function endRecord(){
        clearInterval(recorderTimer);
		$("#time").text("")
        recorder.stop();
    };
	
		// 上传语言   发送语音
	function createUpload(file) {
	    var task = plus.uploader.createUpload("服务器地址", {method: "POST"}, function (t, status) {
	        // 上传完成
	        if (status == 200) {
	            alert("Upload success: " + t.url);
	        } else {
	            alert("Upload failed: " + status);
	        }
	    });
	    task.addFile(file, {key: "aaa"}); // 以表单的方法上传整个音频
	    task.start();
	}		
});

      
	 //拍照 发送图片
    function getImages(){
        var mobileCamera=plus.camera.getCamera();
        mobileCamera.captureImage(function(e){
            plus.io.resolveLocalFileSystemURL(e,function(entry){
                var path=entry.toLocalURL()+'?version='+new Date().getTime();
				 uploadimgss(path)
            },function(err){
                console.log("读取拍照文件错误");
            });
        },function(e){
            console.log("er",err);
        },function(){
            filename:'_doc/head.png';
        });
    }


	
       // 这个是选择图片上传
		function galleryImages(){
		    console.log("你选择了从相册选择");
		    plus.gallery.pick(function(a){
		        plus.io.resolveLocalFileSystemURL(a,function(entry){
		            plus.io.resolveLocalFileSystemURL('_doc/',function(root){
		                root.getFile('head.png',{},function(file){
		                    //文件已经存在
		                    file.remove(function(){
		                        console.log("文件移除成功");
		                        entry.copyTo(root,'head.png',function(e){
		                            var path=e.fullPath+'?version='+new Date().getTime();
								     uploadimgss(path)  // 群聊天发送图片
									// uploadHeadImg(path);
		                        },function(err){
		                            console.log("copy image fail: ",err);
		                        });
		                    },function(err){
		                        console.log("删除图片失败：（"+JSON.stringify(err)+")");
		                    });
		                },function(err){
		                    //打开文件失败
		                    entry.copyTo(root,'head.png',function(e){
		                        var path=e.fullPath+'?version='+new Date().getTime();
		                        uploadHeadImg(path);
		                    },function(err){
		                        console.log("上传图片失败：（"+JSON.stringify(err)+")");
		                    });
		                });
		            },function(e){
		                console.log("读取文件夹失败：（"+JSON.stringify(err)+")");
		            });
		        });
		    },function(err){
		        console.log("读取拍照文件失败: ",err);
		    },{
		        filter:'image'
		    });
		};
		
		
	 //压缩图片转成base64
	function getBase64Image(img){
		// console.log(img.getBase64Image());
	    var canvas=document.createElement("canvas");
	    var width=img.width;
	    var height=img.height;
		var size = img.size;
	    if(width>height){
	        if(width>500){
	            height=Math.round(height*=500/width);
	            width=500;
	        }
	    }else{
	        if(height>500){
	            width=Math.round(width*=500/height);
	        }
	        height=500;
	    }
	    canvas.width=width;
	    canvas.height=height;
	    var ctx=canvas.getContext('2d');
	    ctx.drawImage(img,0,0,width,height);
	    var dataUrl=canvas.toDataURL('image/png',0.8);
	    return dataUrl.replace('data:image/png:base64,','');
	} 
			
			
			
	
	//聊天发送图片上传到后台
	 function uploadimgss(path) {
				 var images=new Image(); 
	              images.src=path; 
				images.onload=function(){
					var imgData=getBase64Image(images); 
						console.log(imgData)
						  plus.nativeUI.showWaiting();
						  mui.ajax('群聊天数据地址',{
								data:{
									file:imgData
								},
								dataType:'json',//服务器返回json格式数据
								type:'post',//HTTP请求类型
								timeout:10000,//超时时间设置为10秒；
								success:function(data){
									console.log("上传数据")
									plus.nativeUI.closeWaiting()						  
								},
								error:function(data){
									mui.alert(data+"1")
								}
							});
				}
	       
	       }		
			
			
			//聊天发送礼物
		 function sendgift(giftid,sendname) {
							  plus.nativeUI.showWaiting();
							  mui.ajax('发送礼物地址',{
									data:{
										// file:imgData
									},
									dataType:'json',//服务器返回json格式数据
									type:'post',//HTTP请求类型
									timeout:10000,//超时时间设置为10秒；
									success:function(data){
										console.log("上传数据")
										plus.nativeUI.closeWaiting()						  
									},
									error:function(data){
										mui.alert(data+"1")
									}
								});
		       }		
		
		

			
			
		</script>
	</body>

</html>
